<html>
<head>
    <title>修改学生信息</title>
</head>
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-lg-offset3" layui-col-lg6>
            <div class="layui-form layuimini-form">
                <form class="layui-form" action="" lay-filter="userForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名：</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required lay-verify="required" placeholder="请输入员工名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码：</label>
                        <div class="layui-input-block">
                            <input type="password" id="pwd" name="password" required lay-verify="required" placeholder="请输入密码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label">确认密码：</label>
                        <div class="layui-input-block">
                            <input type="password" id="repwd" name="repassword" required lay-verify="required" placeholder="请确认密码"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <span style="color: red;" id="tip"></span>
                    </div> -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="nickname" required lay-verify="required" placeholder="昵称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <input type="hidden" name="id" value="" class="layui-input">

                    <div class="layui-form-item">
                        <label class="layui-form-label">性别：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="男" title="男">
                            <input type="radio" name="sex" value="女" title="女" checked>
                        </div>
                    </div>
        
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色:</label>
                        <div class="layui-input-inline">
                            <select name="r_id" id="role" lay-filter="dep">
                                <option value=""> </option>
                            </select>
                        </div>             
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系方式：</label>
                        <div class="layui-input-block">
                            <input type="text" name="telephone" required lay-verify="required" placeholder="请输入电话号码"
                                   autocomplete="off" class="layui-input">
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属地：</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" required id="address" lay-verify="required" placeholder="请选择住址"
                                   autocomplete="off" class="layui-input" disabled>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请选择：</label>
                        <div class="layui-input-inline">
                            <select name="province" id="province" lay-filter="province"> 
                                <option value="">请选择省</option>             
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="city" id="city" lay-filter="city">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="area" id="area" lay-filter="area">
                                <option value="">请选择县/区</option>
                            </select>
                        </div>
                        <!-- <div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div> -->
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">照片：</label>
                        <input type="hidden" name="thumb" id="pic">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="durl">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>

                            <div class="layui-upload-list">
                                <img style="width: 100px" class="layui-upload-img" id="demo1">
                                <p id="demoText"></p>
                            </div>

                            <div style="width: 95px;">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">开通VIP</label>
                        <div class="layui-input-block">
                          <input type="checkbox" name="is_vip" lay-skin="switch" lay-text="VIP|普通">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">禁用状态</label>
                        <div class="layui-input-block">
                          <input type="checkbox" name="status" lay-skin="switch" lay-text="可用|禁用" checked>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript" src="../lib/layui-v2.6.3/layui.js"></script>
<script>
    layui.use(['form','upload','element'],function (){
        var form = layui.form
            //jquery 对象 $
            , $ = layui.jquery
            ,element = layui.element
            ,upload = layui.upload
            // 日期组件
            , laydate = layui.laydate;

        //日期   渲染上面 id 为 date 的 标签
        laydate.render({
            elem: '#date'
        });
       
        var user= JSON.parse(localStorage.getItem("user")); //json串转js对象
        console.log(user);
        form.val("userForm",{ //表单赋值
            "id":user.id,
            "username":user.username,
            "name":user.username,
            "password":user.password,
            "sex":user.sex,
            "nickname":user.nickname,
            "address":user.address,
            "telephone":user.telephone,
            // "thumb":employee.thumb,
            "is_vip":user.is_vip,
            "status":user.status,
            "r_id":user.r_id
        })

         // 图片回显
         $("#demo1").attr("src",user.thumb);
        $("#pic").val(user.thumb);
        //执行实例
        var uploadInst = upload.render({
            elem: '#durl' //绑定元素
            ,field:"file"
            ,url: 'http://localhost:8080/employee/upload' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //上传完毕回调
                if(res.code==200){
                    console.log(res.data.url);
                    $("#demo1").attr("src",res.data.url);
                    // console.log(res.data.url);
                    $("#pic").val(res.data.url);  //把图片地址 写到隐藏域 上传的时候 传到后台
                }


                $('#demoText').html(''); //置空上传失败的状态

            }
            ,error: function(){
                //请求异常回调
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });

            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


        // token 前后端分离再用
        // var token = JSON.parse(localStorage.getItem("token"));

        form.on('submit(formDemo)', function(data){
            console.log(data)
            $.ajax({
                "type":"post",
                "url":"http://localhost:8080/user/updateUser",
                "data":data.field,
                "dataType":"json",
                "success":function (res) {
                    if (res.code==200){
                        layer.msg("修改成功",{icon:6,time:1000,offset:'t'});
                    }else{
                        layer.msg("修改失败",{icon:5,time:1000,offset:'t'});
                    }
                    var frameIndex = parent.layer.getFrameIndex(window.name);//获取当前层的index
                    // parent.layer.close(frameIndex);
                    setTimeout(function (){parent.layer.close(frameIndex)},1000);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    //动态获取角色
    $.ajax({
        "type":'post',
        "url":"http://localhost:8080/role/roleList",
        "dataType":"json",
        "success":function(res){
            if(res.code==200){
                var role=res.data.role;
                var str="<option value=''>选择角色</option>";
                console.log(role.length);
                for(var i=0;i<role.length;i++){
                    if(user.r_id==role[i].id){
                        str+="<option value='"+role[i].id+"' selected>"+role[i].role_name+"</option>"; //动态拼接option
                    }else{
                        str+="<option value='"+role[i].id+"'>"+role[i].role_name+"</option>"; //动态拼接option
                    }
                    
                }
                console.log(str);
                $('#role').html(str);
                form.render();
            }
        }
    })
    
    $("#repwd").blur(function(res){
        $("#tip").text("");
        var pwd=$("#pwd").val();
        var repwd=$("#repwd").val();
        if(pwd!=repwd){
            // alert("两次密码不相同！")
            $("#tip").text("两次密码不相同！请确认密码！")
        }
    })

    //获取省
    var address="";
    $.ajax({
        "type":'post',
        "url":"http://localhost:8080/area/selectAreaByPid",
        'data':{'pid':0},
        "dataType":"json",
        "success":function(res){
            if(res.code==200){
                var areas=res.data.areas;
                var str="<option value=''>请选择省</option>";
                // console.log(areas.length);
                for(var i=0;i<areas.length;i++){
                    str+="<option value='"+areas[i].id+"'>"+areas[i].name+"</option>"; //动态拼接option
                }
                // console.log(str);
                $('#province').html(str);
                form.render();
            }
        }
    })
    //获取市
    form.on('select(province)', function(data){
        $("#address").val("");
        //  console.log(data.elem); //得到select原始DOM对象
        //  console.log(data.value); //得到被选中的值
        //   console.log(data.othis); //得到美化后的DOM对象
        //   var address = data.elem[data.elem.selectedIndex].text+' ';//获取select选中的文本值 拼接省
        //   $("#address").val(address);
          console.log(address);
          var pid=data.value;
          $.ajax({
            "type":'post',
            "url":"http://localhost:8080/area/selectAreaByPid",
            'data':{'pid':pid},
            "dataType":"json",
            "success":function(res){
            if(res.code==200){
                var areas=res.data.areas;
                var str="<option value=''>请选择市</option>";
                // console.log(areas.length);
                for(var i=0;i<areas.length;i++){
                    str+="<option value='"+areas[i].id+"'>"+areas[i].name+"</option>"; //动态拼接option
                }
                // console.log(str);
                $('#city').html(str);
                form.render();
               }
              }
           })
         
        });
         //获取区
    form.on('select(city)', function(data){
         // console.log(data.value); //得到被选中的值
        //  address+=data.elem[data.elem.selectedIndex].text+' ';//获取select选中的文本值 拼接
         $("#address").val("");
         console.log(address);
          var pid=data.value;
          $.ajax({
            "type":'post',
            "url":"http://localhost:8080/area/selectAreaByPid",
            'data':{'pid':pid},
            "dataType":"json",
            "success":function(res){
            if(res.code==200){
                var areas=res.data.areas;
                var str="<option value=''>请选择区</option>";
                // console.log(areas.length);
                for(var i=0;i<areas.length;i++){
                    str+="<option value='"+areas[i].id+"'>"+areas[i].name+"</option>"; //动态拼接option
                }
                // console.log(str);
                $('#area').html(str);
                form.render();
               }
              }
           })        
        });
        //监听区
    form.on('select(area)', function(data){
           $("#address").val("");
            //  console.log(data.value); //得到被选中的值
            // address+=data.elem[data.elem.selectedIndex].text+' ';//获取select选中的文本值 拼接
            address=$("#province option:selected").text()+$("#city option:selected").text()+data.elem[data.elem.selectedIndex].text;
            $("#address").val(address);
            form.render;
            // console.log(address);
        });
    console.log(address);

    })
  
</script>
</body>
</html>